<template>
  <div class="app-container calendar-list-container">

  
    <div class="filter-container">
      <el-form label-width="100px"
               inline
               label-position="left">

                    <el-input clearable
                    @keyup.enter.native="handleFilter"
                    v-model="listQuery.userName"
          style="width: 200px;margin-right:15px;margin-top:7px"
                    class="filter-item"
                    maxlength="20"
                    placeholder="名称（物业）" />

                    <el-input clearable
                    @keyup.enter.native="handleFilter"
                    v-model="listQuery.userAccount"
          style="width: 200px;margin-right:15px;margin-top:7px"
                    class="filter-item"
                    maxlength="20"
                    placeholder="账号（物业）" />
                    <el-input clearable
                    @keyup.enter.native="handleFilter"
                    v-model="listQuery.userPhone"
          style="width: 200px;margin-right:15px;margin-top:7px"
                    class="filter-item"
                    maxlength="20"
                    placeholder="手机号（物业）" />
      </el-form>
      <el-button class="filter-item"
                 type="primary"
                 v-waves
                 icon="el-icon-search"
                 @click="handleFilter">搜索</el-button>
            <el-button   type='primary' class="filter-item" @click="handleDownload"  icon="el-icon-download"  :loading="downloadLoading">导出</el-button>

    </div>
    <!-- table 表格 -->
    <el-table
      :data="list"
      v-loading="loading.list"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号"
      type="index"  width="80px" align="center" >
    </el-table-column>
      <el-table-column  label="名称（物业）" prop="userName" align="center"/>
      <el-table-column  label="账号（物业）" prop="userAccount" align="center"/>
      <el-table-column  label="手机号（物业）" prop="userPhone" align="center"/>
      <el-table-column label="设备总月租(元)" prop="monthlyRentInfo" align="center"/>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 回到顶部 -->
    <BackToTop></BackToTop>
  </div>
</template>
<script>

import {
  getEstateMonthlyRent,
} from "@/api/equipment";

import CountTo from "vue-count-to";
import BackToTop from "@/components/BackToTop";
import VePie from "v-charts/lib/pie";
import pcq from "@/components/index";
import Velocity from "velocity-animate";
import "velocity-animate/velocity.ui.js";
import { parseTime } from "@/utils";
export default {
  name: "equipment_monthlyRentList",
  components: {
    CountTo,
    BackToTop,
    VePie,
    pcq
  },
  data() {
    return {
      estateMonthlyRent:0,
      agentType:this.$store.state.user.userInfo.managerType,
        electricQuantity:0,
      chartData: null,
      estateList:[],
      maintainList:[],
      loading: {
        list: false,
        add: false,
        detele: false,
        upd: false
      },
      dialog: {
        bind: false,
        add: false,
        upd: false,
        view: false
      },
      imgList: [],
      total: 0,
      downloadLoading: false,
      date: "",
      listQuery: {
           offset: 1,
        limit: 10,
         userName: "",
         userAccount: "",  
         userPhone: "",
      },
      list: null,
      chargeRules: [],
      downloadLoading: false,
      equipmentCount: 0,
      showPic: "",
      dialogVisible: false
    };
  },

  methods: {
     // 获取电量列表
     async getElectricList(){
         this.loading.list = true;
      try {
         //调用服务器接口
         const {data}  = await getEstateMonthlyRent({...this.listQuery})
 this.list = data.records.map((item, index) => ({
          index: index + 1,
          monthlyRentInfo:item.monthlyRent/100,
          ...item
        }));

        this.total = data.total;
      } catch (error) {}
      this.loading.list = false;

     },

  
    //导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号','名称（物业）','账号（物业）','手机号（物业）','设备总月租(元)']
        const filterVal = [ 'index','userName','userAccount','userPhone','monthlyRentInfo'	]
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '月租列表'
        })
        this.downloadLoading = false
      })
    },
    // 数据筛选
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
          return v[j]
      }))
    },

    handleFilter() {
      this.listQuery.offset = 1;
      this.getElectricList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getElectricList();
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val;
      this.getElectricList();
    },

  
  },
 
  created() {
      // this.getEquipmentLists();
     
        this.getElectricList()
      //   (this.provices = getAddressByAreaId(0)), this.getCities();
      //  this.getAreas();
  
  
  }
};
</script>
<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0px;
}
</style>
